<template>
  <el-dialog
    :model-value="tbWiringTkVisible"
    title="选择表位故障"
    width="70%"
    :before-close="handleClose"
  >
    <div class="tb-wiring">
      <el-form ref="twfFormRef" :model="twfForm">
        <fieldset>
          <legend>表位故障:</legend>
          <div class="ll-bw">
            <fieldset>
              <legend>485线路故障:</legend>
              <div>
                <el-checkbox-group class="ll-bw-item1" v-model="twfForm.ttype">
                  <el-checkbox label="A_DISCONNECT:485A断">485A断</el-checkbox>
                  <el-checkbox label="B_DISCONNECT:485B断">485B断</el-checkbox>
                  <el-checkbox label="A_B_CROSS:485AB反接"
                    >485AB反接</el-checkbox
                  >
                  <el-checkbox label="A_B_BY_PASS:485AB短路"
                    >485AB短路</el-checkbox
                  >
                </el-checkbox-group>
              </div>
            </fieldset>
            <fieldset>
              <legend>电压线路故障:</legend>
              <div class="ll-bw-item2">
                <div>
                  <el-checkbox-group class="item" v-model="twfForm.vlf">
                    <el-checkbox label="U_A_DISCONNECT:A相电压断路"
                      >A相电压断路</el-checkbox
                    >
                    <el-checkbox label="U_B_DISCONNECT:B相电压断路"
                      >B相电压断路</el-checkbox
                    >
                    <el-checkbox label="U_C_DISCONNECT:C相电压断路"
                      >C相电压断路</el-checkbox
                    >
                    <el-checkbox label="U_N_DISCONNECT:N相电压断路"
                      >N相电压断路</el-checkbox
                    >
                  </el-checkbox-group>
                </div>
                <div>
                  <fieldset>
                    <legend>电压相序:</legend>
                    <div>
                      <el-radio-group class="item" v-model="twfForm.vps">
                        <el-radio label="U_ABC:ABC">ABC</el-radio>
                        <el-radio label="U_ACB:ACB">ACB</el-radio>
                        <el-radio label="U_BAC:BAC">BAC</el-radio>
                        <el-radio label="U_BCA:BCA">BCA</el-radio>
                      </el-radio-group>
                    </div>
                  </fieldset>
                </div>
              </div>
            </fieldset>
            <fieldset>
              <legend>电流线路故障:</legend>
              <div class="ll-bw-item2">
                <div>
                  <el-checkbox-group class="item" v-model="twfForm.clf">
                    <el-checkbox label="IA_CROSS:A相电流反极"
                      >A相电流反极</el-checkbox
                    >
                    <el-checkbox label="IB_CROSS:B相电流反极"
                      >B相电流反极</el-checkbox
                    >
                    <el-checkbox label="IC_CROSS:C相电流反极"
                      >C相电流反极</el-checkbox
                    >
                  </el-checkbox-group>
                </div>
                <div>
                  <el-checkbox-group class="item" v-model="twfForm.clf">
                    <el-checkbox label="IA_PASS:IA短路">IA短路</el-checkbox>
                    <el-checkbox label="IB_PASS:IB短路">IB短路</el-checkbox>
                    <el-checkbox label="IC_PASS:IC短路">IC短路</el-checkbox>
                  </el-checkbox-group>
                </div>
                <div class="item">
                  <el-checkbox-group class="item" v-model="twfForm.clf">
                    <el-checkbox label="IA_OPEN:A相电流开路"
                      >A相电流开路</el-checkbox
                    >
                    <el-checkbox label="IB_OPEN:B相电流开路"
                      >B相电流开路</el-checkbox
                    >
                    <el-checkbox label="IC_OPEN:C相电流开路"
                      >C相电流开路</el-checkbox
                    >
                  </el-checkbox-group>
                </div>
                <div>
                  <fieldset>
                    <legend>电流线路故障:</legend>
                    <el-radio-group class="item" v-model="twfForm.cps">
                      <el-radio label="I_ABC:ABC">ABC</el-radio>
                      <el-radio label="I_CBA:CBA">CBA</el-radio>
                      <el-radio label="I_ACB:ACB">ACB</el-radio>
                      <el-radio label="I_CAB:CAB">CAB</el-radio>
                    </el-radio-group>
                  </fieldset>
                </div>
              </div>
            </fieldset>
          </div>
        </fieldset>
      </el-form>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">返回</el-button>
        <el-button type="primary" @click="handle"> 确定 </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup>
import { ref, onMounted, reactive } from "vue";
import { useAppStore, paramsDataStore } from "@/stores";
import { storeToRefs } from "pinia";

const emit = defineEmits(["changeWiring"]);

const twfFormRef = ref();
const twfForm = reactive({
  ttype: [],
  vlf: [],
  vps: "U_ABC:ABC",
  clf: [],
  cps: "I_ABC:ABC",
});
const useApp = useAppStore();
let { tbWiringTkVisible, meterIds, organStructure } = storeToRefs(useApp);
const paramsData = paramsDataStore();
let { stationArea, newStationArea, selectedArea } = storeToRefs(paramsData);

const tableData = ref([]);
const currentBw = ref([]);
const posList = ref([]);
const arr = [3, 4, 7, 8];

// 关闭弹窗
const handleClose = () => {
  tbWiringTkVisible.value = false;
  currentBw.value = [];
};
// 点击确定
const handle = () => {
  emit("changeWiring", twfForm);
  tbWiringTkVisible.value = false;
};
const changeBg = (row) => {
  // currentBw.value = [];
  if (row.state && row.orgId && !row.bg) {
    stationArea.value.forEach((item) => {
      item.bg = false;
      if (meterIds.value.includes(item.orgId)) {
        item.bg = true;
      }
      if (props.meterId === item.orgId) {
        item.bg = false;
      }
      if (item.value === row.value) {
        item.bg = true;
      }
    });
    currentBw.value = row;
  }
};

const loopDataStation = (data, newData) => {
  data.forEach((item) => {
    if (item.position && arr.includes(item.type)) {
      newData.push(item);
    }
    if (item.children) {
      loopDataStation(item.children, newData);
    }
  });
  return newData;
};
</script>
<style lang="scss" scoped>
.tb-wiring {
  .ll-bw {
    display: flex;
    justify-content: center;
    .ll-bw-item1 {
      display: flex;
      flex-direction: column;
      padding: 2px 10px;
    }
    .ll-bw-item2 {
      display: flex;
    }
    .item {
      display: flex;
      flex-direction: column;
    }
  }
}
</style>
